<template>
  <el-row style="background:white;border-radius:10px">
    <el-row style="width: 98%;height:35px;line-height:35px;font-size:14px">
      <div class="projectIndexTitle">
        <div class="projectIndexSquare"></div>
        <label class="projectIndexInfo">项目状态</label>
      </div>
      <!-- <el-col :span="12">&nbsp;项目状态</el-col>
      <el-col :span="10" :offset="1"> -->
      <!-- <el-select placeholder="请选择" v-model="selectType">
          <el-option v-for=" item in selections" :label="item.label" :value="item.value" :key="item.value">
          </el-option>
        </el-select>-->
      <!-- </el-col> -->
    </el-row>
    <div id="projectStatusMain" style="min-height:305px;width: 98%;height:40.5vh;"></div>
  </el-row>
</template>

<script>
import echarts from 'echarts'
import indexComp from "../../gpmProjectInfo/indexForQueryComp"

require('echarts/theme/macarons') // echarts theme
// 项目状态
export default {
  name: 'projectStatus',
  // mixins: [mixin_list],
  props: {
    dataPermission: {
      type: String,
      default: ''
    }
  },
  components: { indexComp },
  data() {
    return {
      statusSeriesData: [],
      selections: [
        {
          value: '2020',
          label: '2020'
        },
        {
          value: '2019',
          label: '2019'
        },
        {
          value: '2018',
          label: '2018'
        }
      ],
      selectType: ''
    }
  },
  mounted() {},
  methods: {
    doClickChart(data) {
      this.$router.push({
        name: 'projectIndexForQuery',
        query: {
          abnormalstate: data,
          projectstate: 1,
          dataPermission: this.dataPermission
        }
      })
    },
    setLineOptionForStatus() {
      // let mychart = echarts.init(this.$el, 'macarons')

      let mychart = echarts.init(document.getElementById('projectStatusMain'))
      var seriesForThis = this.statusSeriesData
      let option = {
        // color: ['#0066FF', '#00FF66', '#66CCFF'],
        title: {
          text: '项目状态',
          left: '40%',
          top: 'center',
          textAlign: 'center',
          show: seriesForThis !== undefined ? seriesForThis.length > 0 : false
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: [
          {
            orient: 'vertical',
            itemGap: 25,
            top: 'center',
            left: '70%',
            height: 200,
            width: '100%',
            itemWidth: 15,
            textStyle: { fontSize: 14 },

            formatter: function formatter(name) {
              var index = 0
              var dataTemp = seriesForThis
              dataTemp.forEach(function formatter(value, i) {
                if (value.name === name) {
                  index = i
                }
              })
              return name + '：' + dataTemp[index].value + '个'
            },
            data: seriesForThis
          }
        ],
        series: [
          {
            name: '项目状态',
            type: 'pie',
            // 大小
            radius: ['55%', '75%'],
            // 位置
            center: ['40%', '50%'],
            avoidLabelOverlap: false,
            top: 0,
            label: {
              show: false,
              position: 'center'
            },
            itemStyle: {
              color: (item) => {
                if (item.data.code === '0') {
                  return 'green'
                } else if (item.data.code === '10') {
                  return '#FAD232'
                } else if (item.data.code === '15') {
                  return '#0000FF'
                } else if (item.data.code === '20') {
                  return '#FF8C2E'
                } else if (item.data.code === '30') {
                  return '#D80A1E'
                }
              }
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.statusSeriesData
          }
        ]
      }
      mychart.setOption(option)
      var that = this
      mychart.on('click', function(params) {
        let level = params.data.code
        that.doClickChart(level)
      })
      // 控制标题显示
      let setTitleTrue = () => {
        mychart.setOption({
          title: {
            show: true
          }
        })
      }
      let setTitleFalse = () => {
        mychart.setOption({
          title: {
            show: false
          }
        })
      }
      mychart.on('mouseover', setTitleFalse)
      mychart.on('mouseout', setTitleTrue)
      mychart.on('highlight', setTitleFalse)
      mychart.on('downplay', setTitleTrue)
      // 饼图点击事件，跳转至项目管理页面 ，跳转之后根据项目A，B,C等级条件筛选项目
      // mychart.on('click', function(params) {
      //   window.location.href = "/projectManager/mpmProjectQuery?" + params.data.code
      // })
    }
  },
  created() {}
}
</script>

<style scoped>
.parentCenter {
  display: flex;

  background: #cecece;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}

.child {
  background: #000;
  width: 10%;
  height: 10%;
}
.el-row {
  margin-bottom: 0px;
}
</style>
